{% extends "dash/base.html" %}
{% block content %} 

   <script type="text/javascript">
   $('#timedisp').show();
   $('#intraffic').hide();
   $('#protdisp').hide();
   $('#outtraffic').hide();
   $('#srch').hide();
   $('#atck').hide();


function drawgraph()
       {
           $('#chart3').empty();
           
	
           var data1 = [{% for item in slist5 %}
                                    { "flow_time" : "{{ item.flow_time|date:"d-m-Y H:i:s"}}",
                                      "packets" :"{{ item.packets }}",
                                                         
                                    },

                                    {% endfor %}
                                   ];

           var margin = {top: 40, right: 40, bottom: 40, left:70},
           width = 1200,
           height = 800;
          
           
            var x = d3.time.scale()
                    .range([0, width]);
            var parseDate = d3.time.format("%d-%m-%Y %H:%M:%S").parse;
            data1.forEach(function(d) {
                                        d.flow_time = parseDate(d.flow_time);
                                        d.packets = d.packets;
                                     
                 		       });
            var y = d3.scale.linear()
                   .domain([0, d3.max(data1, function(d) { return d.packets; })])
                   .range([height - margin.top - margin.bottom, 0]);

            x.domain(d3.extent(data1, function(d) { return d.flow_time; })) .rangeRound([0, width - margin.left - margin.right]);
           
            var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom")
                        .tickFormat(d3.time.format("%d-%m-%Y %H:%M:%S"))
                        .tickSize(0)
                        .tickPadding(8);
            var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient('left')
                        .tickPadding(10);
            var svg = d3.select('#chart3').append('svg')
                      .attr('class', 'chart')
                      .attr('width', width)
                      .attr('height', height)
                      .append('g')
                      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

          
	    svg.selectAll('.chart')
    	       .data(data1)
    	       .enter().append('rect')
      	       .attr('class', 'bar')
      	       .attr('x', function(d) { return x(d.flow_time); })
      	       .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.packets)) })
      	       .attr('width', 10)
      	       .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.packets) });
            svg.append("text")      // text label for the x axis
                .attr("x", width/2 )
                .attr("y",  (height-margin.top) )
                .style("text-anchor", "middle")
                .text("Time");
  	    svg.append('g')
    	       .attr('class', 'x axis')
     	       .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
               .call(xAxis);
            svg.append("text")
               .attr("class", "y label")
               .attr("text-anchor", "middle")
               .attr("y", -20)
               .attr("dy", "1em")
               .attr("transform", "rotate(-90)")
               .text("packets");
	    svg.append('g')
  	       .attr('class', 'y axis')
  	       .call(yAxis);
            var tablecontents = "";
                tablecontents = "<table>"; 
                tablecontents += "<thead>";
                tablecontents += "<tr>";
                tablecontents += "<th>";
                tablecontents += "index";
                tablecontents += "</th>";
                tablecontents += "<th>";
                tablecontents += "packets";
                tablecontents += "</th>";
                tablecontents += "<th>";
                tablecontents += "flow_time";
                tablecontents += "</th>";
                tablecontents += "</tr>";
                tablecontents += "</thead>";
            for (var i = 0; i < data1.length; i ++)
            {
      		var emp = data1[i].packets;
      		var las = data1[i].flow_time;
      		tablecontents += "<tr>";
      		tablecontents += "<td>" + (i+1) + "</td>";
     	        tablecontents += "<td>" + emp + "</td>";
                tablecontents += "<td>" + las + "</td>";
      		tablecontents += "</tr>";
   	    }
            tablecontents += "</table>";
  	    document.getElementById("table3").innerHTML = tablecontents;
             $("#table3").hide(); 
            $("#but1").click(function() { 
		$("#table3").show();
		});
       
       }

     function dbytes()
       {
            $('#chart4').empty();
           
            var data1 = [{% for item in slist5 %}
                                    { "flow_time" : "{{ item.flow_time|date:"d-m-Y H:i:s"}}",
                                      "bytes" :"{{ item.bytes }}",
                                                                                               
                                    },

                                    {% endfor %}
                                   ];

           
           var margin = {top: 40, right: 40, bottom: 40, left:70},
           width = 1200,
           height = 800;
         
           
            var x = d3.time.scale()
                    .range([0, width]);
            var parseDate = d3.time.format("%d-%m-%Y %H:%M:%S").parse;
            data1.forEach(function(d) {
                                        d.flow_time = parseDate(d.flow_time);
                                        d.bytes = d.bytes;
                                       
                 		       });
            var y = d3.scale.linear()
                   .domain([0, d3.max(data1, function(d) { return d.bytes; })])
                   .range([height - margin.top - margin.bottom, 0]);

            x.domain(d3.extent(data1, function(d) { return d.flow_time; })) .rangeRound([0, width - margin.left - margin.right]);
            
            var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom")
                        .tickFormat(d3.time.format("%d-%m-%Y %H:%M:%S"))
                        .tickSize(0)
                        .tickPadding(8);
            var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient('left')
                        .tickPadding(10);
            var svg = d3.select('#chart4').append('svg')
                      .attr('class', 'chart')
                      .attr('width', width)
                      .attr('height', height)
                      .append('g')
                      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
	    svg.selectAll('.chart')
    	       .data(data1)
    	       .enter().append('rect')
      	       .attr('class', 'bar')
      	       .attr('x', function(d) { return x(d.flow_time); })
      	       .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.bytes)) })
      	       .attr('width', 10)
      	       .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.bytes) });
            svg.append("text")      // text label for the x axis
                .attr("x", width/2 )
                .attr("y",  (height-margin.top) )
                .style("text-anchor", "middle")
                .text("Time");
  	    svg.append('g')
    	       .attr('class', 'x axis')
     	       .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
               .call(xAxis);
            svg.append("text")
               .attr("class", "y label")
               .attr("text-anchor", "middle")
               .attr("y", -20)
               .attr("dy", "1em")
               .attr("transform", "rotate(-90)")
               .text("bytes");
	    svg.append('g')
  	       .attr('class', 'y axis')
  	       .call(yAxis);
            var tablecontents = "";
                tablecontents = "<table>"; 
                tablecontents += "<thead>";
                tablecontents += "<tr>";
                tablecontents += "<th>";
                tablecontents += "index";
                tablecontents += "</th>";
                tablecontents += "<th>";
                tablecontents += "bytes";
                tablecontents += "</th>";
                tablecontents += "<th>";
                tablecontents += "flow_time";
                tablecontents += "</th>";
                tablecontents += "</tr>";
                tablecontents += "</thead>";
            for (var i = 0; i < data1.length; i ++)
            {
      		var byt = data1[i].bytes;
                var las = data1[i].flow_time;
      		tablecontents += "<tr>";
      		tablecontents += "<td>" + (i+1) + "</td>";
     	        tablecontents += "<td>" + byt + "</td>";
                tablecontents += "<td>" + las + "</td>";
      		tablecontents += "</tr>";
   	    }
            tablecontents += "</table>";
  	    document.getElementById("table4").innerHTML = tablecontents;
             $("#table4").hide(); 
            $("#but2").click(function() { 
		$("#table4").show();
		});
       
       }

dbytes();
drawgraph();

</script>
{% endblock %}
 
 
